<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">个人资料</div>
	</div>

	<Form :label-width="100" style="max-width:400px;" mgt3>
		<FormItem prop="head">
        	<picture-single v-model="model" prop="head" :height=100 :width=100></picture-single>
		</FormItem>
		<FormItem label="用户名" prop="userName">
			<Input v-model="model.userName" disabled />
		</FormItem>

		<FormItem v-for="(item, key) in formItems" :key="key" v-if="!item.isFixed&&item.enabled" :label="item.displayName">
			<Input v-if="item.type==0" v-model="model[key]" />
			<Select v-if="item.type==2" v-model="model[key]">
				<Option v-for="(option, index) in item.options" :key="index" :value="option">{{option}}</Option>
			</Select>
			<RadioGroup v-if="item.type==3" v-model="model[key]">
				<Radio v-for="(option, index) in item.options" :key="index" :label="option"></Radio>
			</RadioGroup>
		</FormItem>

		<FormItem v-if="formItems.phoneNumber.enabled" label="手机" prop="phoneNumber">
			<Input v-model="model.phoneNumber" disabled />
		</FormItem>
		<FormItem v-if="formItems.emailAddress.enabled" label="邮箱" prop="emailAddress">
			<Input v-model="model.emailAddress" disabled />
		</FormItem>
		<FormItem>
			<Button type="primary" @click="handleSave">保存</Button>
		</FormItem>
	</Form>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import util from '../../lib/util'
import PictureSingle from '@common/components/picture-single.vue'

@Component({
    components: {
        PictureSingle
    }
})
export default class PersonalProfile extends AbpBase{
	model:any = {}
	get formItems() {
		var customItems = this.$store.state.setting.settings.memberFormItems.reduce((result, elem) => {
			result[elem.name] = elem;
			return result;
		}, {});
		var fixedItems = {
			name: { enabled: true, isFixed: true, name: 'name', displayName: '姓名', type: 0 },
			sex: { enabled: true, isFixed: true, name: 'sex', displayName: '性别', type: 3, tag: '男,女' },
			phoneNumber: { enabled: true, isFixed: true, isRequired: true, name: 'phoneNumber', displayName: '手机', type: 0 },
			emailAddress: { enabled: true, isFixed: true, isRequired: true, name: 'emailAddress', displayName: '邮箱', type: 0 }
		};
		var result = util.merge({}, fixedItems, customItems);
		for(var key in result) {
			var elem = result[key];
			if(elem.type == 2) {
				elem.options = elem.tag.split(',');
			}else if(elem.type == 3) {
				elem.options = elem.tag.split(',');
			}
		}
		console.log(result)
		this.generateModel(result);
		return result;
	}
	generateModel(formItems) {
		var member = this.$store.state.self.member;

		var temp = {
			head: member.head,
			userName: member.userName
		};
		for(var key in formItems) {
			temp[key] = member.formItems[key] || member[key] || '';
		}
		this.model = temp;
	}
	async handleSave() {
		var dic = {};
		for(var key in this.formItems) {
			var elem = this.formItems[key];
			if(elem.isFixed) continue;
			dic[key] = this.model[key];
		}
		this.model.formItems = dic;
		
		var response = await this.put('Member/UpdatePersonalProfile', this.model);
		if(response.success) {
			location.reload();
		}
	}
}
</script>
